<template>
  <div class="box">
      <div class="box-top">
          <span class="top-sp1" @click="handleClick">猜你喜欢</span>
          <span class="top-sp2">换一批</span>
          <span class="iconfont icon-duihuan"></span>
      </div>
      <div class="box-bottom">
          <div class="bot-list" v-for="cainis in caini" :key = "cainis.id" @click="lives(cainis.id)">
              <img :src="cainis.goodsImg">
              <p class="list-op1">
                  {{cainis.goodsName}}
              </p>
              <p class="list-op2">
                  <span class="list-sp1">￥<span class="list-sp2">{{cainis.goodsLowPrice}}</span></span><del class="list-de1"><del class="list-de2">{{cainis.goodsHighPrice}}</del></del>
              </p>
              <span class="iconfont icon-jia"></span>
          </div>
      </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
    name:'Lives',
    props: ['l'],
    data() {
        return {
           caini:[]
        }
    },
    methods: {
        handleClick() {
            this.$emit('hanldeSuccess', this.child)
        },
        lives(xiaoid){
            this.$router.push("/Details/"+xiaoid)
        }
    },
    created(){
        axios({
            url:"/api/goods/findGoodsByHot"
        })
        .then(res=>{
            console.log(res.data.data);
            this.caini = res.data.data
        })
    }
}
</script>

<style scoped>
@import url("../assets/font-footer/iconfont.css");
.box{
    margin: auto;
    /* margin-top: 0.42rem; */
    width: 3.4rem;
}
.box .box-top{
    width: 100%;
    height: 0.24rem;
}
.box-top .top-sp1{
    font-size: 0.13rem;
    display: block;
    float: left;
    position: relative;
    margin-left: 0.05rem;
}
.box-top .top-sp1::after{
    content: "";
    display: block;
    width: 0.03rem;
    height: 0.1rem;
    background-color: #5274ab;
    position: absolute;
    top: 0.04rem;
    left: -0.05rem;
}
.box-top .top-sp2{
    float: right;
    font-size: 0.12rem;
    color: #6f8bbe;
    margin-left: 0.06rem;
}
.box-top .icon-duihuan{
    float: right;
    font-size: 0.13rem;
    color: #6f8bbe;
}
.box .box-bottom{
    width: 100%;
    height: 3.64rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
}
.box-bottom .bot-list{
    width: 1.08rem;
    height: 1.76rem;
    background-color: #fff;
    position: relative;
}
.bot-list img{
    display: block;
    width: 1.08rem;
    height: 1.08rem;
}
.bot-list .list-op1{
    font-size: 0.12rem;
    margin: 0.07rem 0 0.22rem 0.05rem;
}
.bot-list .list-op2{
    width: 0.5rem;
    height: 0.12rem;
}
.list-op2 .list-sp1{
    font-size: 0.12rem;
    color: #f44000;
    margin-right: 0.03rem;
}
.list-op2 .list-de1{
    font-size: 0.08rem;
    color: #a5a5a5;
    text-decoration: line-through;
}
.bot-list .icon-jia{
    font-size: 0.2rem;
    color: #21267f;
    position: absolute;
    bottom: 0.03rem;
    right: 0.05rem;
}
</style>